<template>
  <div id="container"></div>
</template>

<script>
import 'echarts-wordcloud';

export default {
  mounted() {
    var chart = this.$echarts.init(document.getElementById('container'));
    chart.setOption({
      series: [{
        type: 'wordCloud',
        shape: 'cardioid',
        textStyle: {
          normal: {
            color: function() {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          }
        },
        data: [
          {
          name: "大众",
          value: 10000
        },
          {
            name: "丰田",
            value: 6181,
          },
          {
            name: "吉利",
            value: 4386,
          },
          {
            name: "宝马",
            value: 4055,
          },
          {
            name: "奔驰",
            value: 2467,
          },
          {
            name: "本田",
            value: 2244,
          },
          {
            name: "奥迪",
            value: 1898,
          },
          {
            name: "哈弗",
            value: 1484,
          },
          {
            name: "WEY",
            value: 1112,
          },
          {
            name: "特斯拉",
            value: 965,
          },
          {
            name: "比亚迪",
            value: 847,
          },
          {
            name: "保时捷",
            value: 582,
          },
          {
            name: "理想",
            value: 555,
          },
          {
            name: "五菱宏光",
            value: 550,
          },
          {
            name: "日产",
            value: 462,
          },
          {
            name: "别克",
            value: 366,
          },
          {
            name: "福特",
            value: 360,
          },
          {
            name: "长安",
            value: 282,
          },
          {
            name: "凯迪拉克",
            value: 273,
          },
          {
            name: "小鹏",
            value: 265,
          }
        ]
      }]
    })
  }
}
</script>

<style scoped>
#container {
  width: 800px;
  height: 600px;
}
</style>
